<template>
	<div class="resource_wrapper">
		<div class="resource_header">
			<div class="button">
				<el-dropdown size="medium" placement="bottom-start" @command="handleCommandEvent">
					<el-button size="small" type="primary" icon="el-icon-plus"></el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="addFiles" icon="el-icon-upload2">上传文件</el-dropdown-item>
						<el-dropdown-item command="addLinks" icon="el-icon-link">新建外部链接</el-dropdown-item>
						<el-dropdown-item command="addFolder" icon="el-icon-folder-add">新建文件夹</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="filter">
				<el-radio-group size="small" v-model="queryData.showType" @change="queryResourceData()">
					<el-radio :label="null">全部</el-radio>
					<el-radio v-for="(item, index) in dictEnums['FILE_TYPE']" :key="index" :label="item.value">
						<svg-icon :icon-name="item.value | fileTypeIcon" size="16"></svg-icon>
						{{ item.msg }}
					</el-radio>
				</el-radio-group>
				<el-input size="small" clearable placeholder="请输入库名称" v-model="queryData.keyName">
					<el-button slot="append" icon="el-icon-search" @click="queryResourceData()"></el-button>
				</el-input>
			</div>
		</div>
		<resource-content ref="resDetail" :data="queryData" :lib-data="libraryData" @hand="handleContextEvent"></resource-content>
		<file-form v-model="fileDialog" @refresh="queryResourceData()"></file-form>
		<link-form v-model="linkDialog" @refresh="queryResourceData()"></link-form>
		<folder-form v-model="folderDialog" @refresh="queryResourceData()"></folder-form>
		<resource-move v-model="moveDrawer" :data="moveData" @refresh="queryResourceData()"></resource-move>
		<resource-copy v-model="copyDrawer" :data="copyData" @refresh="queryResourceData()"></resource-copy>
	</div>
</template>

<script>
import moment from 'moment';
import { mapGetters } from 'vuex';
import fileForm from './form/file';
import linkForm from './form/link';
import folderForm from './form/folder';
import resourceContent from './content';
import resourceMove from './dialog/move';
import resourceCopy from './dialog/copy';
import { queryLibrarySetting } from '@/api/data/tbNetDiskDir';

export default {
	components: { fileForm, linkForm, folderForm, resourceContent, resourceMove, resourceCopy },
	data() {
		return {
			filterData: {},
			libraryData: {},

			//表单
			fileDialog: false,
			linkDialog: false,
			folderDialog: false,
			queryData: { showType: null },

			//移动资源
			moveDrawer: false,
			moveData: [],

			//复制资源
			copyDrawer: false,
			copyData: []
		};
	},
	computed: {
		...mapGetters(['dictEnums']),
		libraryId() {
			return this.$route.params.id || '';
		}
	},
	mounted() {
		this.getLibraryDetail();
	},
	methods: {
		//获取资源库详情
		async getLibraryDetail() {
			let result = await queryLibrarySetting(this.libraryId).then((res) => res.data);
			if (result.code === '0') {
				this.libraryData = this.$detailData(result.data);
			}
		},

		//查询资源数据
		queryResourceData() {
			this.$refs['resDetail'].queryResourceData();
		},

		//新增下拉菜单操作
		handleCommandEvent(command) {
			if (command === 'addFiles') {
				this.fileDialog = true;
			} else if (command === 'addLinks') {
				this.linkDialog = true;
			} else if (command === 'addFolder') {
				this.folderDialog = true;
			}
		},

		//展开文件夹
		async handleExpandFolder(id) {
			let result = await getResourcePath(id).then((res) => res.data);
			this.$router.push({ path: this.fullPath, query: { folder: id } });
		},

		//右键操作
		handleContextEvent(type, data) {
			if (type === 'move') {
				this.moveDrawer = true;
				this.moveData = [data];
			} else if (type === 'copy') {
				this.copyDrawer = true;
				this.copyData = [data];
			} else if (type === 'share') {
				this.shareDialog = true;
			} else if (type === 'editlink') {
				this.linkData = { ...data };
				this.linkFormDialog = true;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
}

.resource_header::v-deep {
	display: flex;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: solid 1px #f5f7fa;
	flex-shrink: 0;

	.button {
		margin-right: 20px;
		padding-right: 20px;
		border-right: solid 1px #eef1f5;
	}
	.filter {
		flex: 1;
		display: flex;
		justify-content: space-between;
		.el-radio-group {
			display: flex;
			align-items: center;
			padding: 3px;
			border-radius: 4px;
			background-color: #eef1f5;
		}
		.el-radio {
			margin: 0;
			padding: 0 8px;
			border-radius: 4px;
			&.is-checked {
				background-color: #fff;
			}
		}
		.el-radio__input {
			display: none;
		}
		.el-radio__label {
			display: flex;
			align-items: center;
			height: 26px;
			padding: 0;
			.svg-icon {
				margin-right: 4px;
			}
		}
		.el-input-group {
			width: 240px;
		}
	}
}
</style>
